$background: #1C1736;
$primary-text-color: #fff;
$secondary-text-color: #868686;

$offer-content-border: #484848;
$offer-header-background: #f5f5f5;
$offer-content-background: #3e3e3e;
$offer-header-size: 50px;

.blackFridayModal .modal-dialog {
    border-color: $background;
    width: 58rem;
    margin-left: calc(-58rem/2);
}

.blackFridayModal  .modal-dialog .close {
    background-color: $background;
    font-size: 1.2rem;
    font-weight: normal;
    margin-top: 1rem;
    margin-right: 1rem
}
.blackFriday-container {
    background-color: $background;
    position: relative;
}

.blackFriday-container::before {
    display: block;
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: url(assets('/bf/blackfriday-background.svg')) center no-repeat;
}

/* --force-douce */
.blackFriday-header.blackFriday-header.blackFriday-header {
    position: relative;
    padding: 4rem 0 0;
    text-align: center;
    margin-bottom: 5em;
    font-size: 1.2rem;

    h1, h2 {
        color: $white;
        font-weight: bold;
        overflow: initial;
    }

    h1 {
        font-size: 2em;
        margin-bottom: 1rem;
    }

    h2 {
        font-size: 1.1em
    }
}


.blackFriday-content {
    position: relative;
    padding: 0 3rem;
}

.blackFridayCountdown-container {
    min-height: 27px;
    font-size: 1.3em;
    color: $white;
    font-weight: bold
}

.blackFridayIntro {
    display: block;

    font-size: 1.5em;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    color: $secondary-text-color !important;
}

.blackFridayCurrent {
    display: block;

    font-size: 1em;
    text-align: center;
    font-weight: bold;
    color: $primary-text-color !important;
}

.blackFridayOffers-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


.blackFridayOffer-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: $white;
    border: .3em solid transparent;
    border-radius: .5rem;
    flex: 0 0 calc(33% - .5rem);
    text-align: center;
    font-weight: bold;
}


.blackFridayOffer-container:nth-of-type(1) {
    .be-headerOffer-titles span { display: none }
}
.blackFridayOffer-container:nth-of-type(2) {

    .blackFridayOffer-price-info {
        color: $primary;
    }

}

.blackFridayOffer-container:hover {
    border-color: $primary
}


.blackFridayOffer-header {
    font-size: 1.2em;
    height: $offer-header-size;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.bf-bubble-percent {
    color: $white;
    text-transform: uppercase;
    position: absolute;
    top: calc(-50% - 1.7em);
    left: 0;
    right: 0;
    display: flex
}

.bf-bubble-percentTxt {
    border-radius: 100%;
    background: lighten($bug, 5%);
    font-size: 1em;
    padding: 1em 1.1em;
    margin: auto
}

.be-headerOffer-titles {
    min-height: 100px;
    padding-top: 3rem;
    color: $primary;
}

.be-headerOffer-titles {
    font-size: 1.2rem;

    h5 {
        font-size: 1em;
        padding-bottom: .2em;
    }

    span {
        font-size: .8em
    }
}

.blackFridayOffer-content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 2rem 1rem;
    width: 100%;
    color: #2f333e
}

.blackFridayOffers-container[data-offer-n="2"] {
    justify-content: center;

    .blackFridayOffer-container + .blackFridayOffer-container {
        margin-left: 2rem;
    }

    .blackFridayOffer-container:nth-of-type(1) .be-headerOffer-titles span {
        display: block;
    }
}

.blackFridayOffer-plans {
    height: 3.5em;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.blackFridayOffer-plans-title {
    display: block;
    font-size: 1.3em;
    margin-bottom: 0.25em;
}

.blackFridayOffer-price-container {
    margin: 1rem 0;

}

.blackFridayOffer-price-info {
    font-size: 2.4em;
    margin-bottom: 5px;
}

.bf-main-price {
    font-size: 1.8em
}


.blackFridayOffer-price-regular, .blackFridayOffer-price-billing {
    font-size: 0.8em;
    color: $secondary-text-color;
}

.blackFridayOffer-price-savings {
    margin: 1em 0 1rem;
    font-size: 1.5em;
    color: $primary;
    text-transform: uppercase;
}

.blackFridayOffer-buy {
    position: relative;
    width: 90%;
    margin-top: auto;
    margin-bottom: 2em;
}

.blackFriday-footer {
    position: relative;
    padding: 0 4em 1em 4em;
}

.blackFridayAfter-container {
    color: $secondary-text-color;
    text-align: center;
}

.blackFridayAfter-item {
    display: block;
    margin-bottom: .5em;
}

.bf-billedas {
    font-weight: normal;
    color: darken($gray-light, 20%);
}

.blackFriday-container .currencySelector-container {
    margin: 3em 0;
    justify-content: center;

    .currencySelector-button.currencySelector-button {
        background: transparent;
        border-color: $offer-content-border;
        color: $white;
    }
    .currencySelector-button:first-of-type {
        border-radius: .5rem 0 0 .5rem
    }
    .currencySelector-button:last-of-type {
        border-radius: 0 .5rem .5rem 0
    }

    .currencySelector-button.active:hover, .currencySelector-button:hover {
        background: lighten($primary, 10);
        color: $primary-text-color;
    }

    &[data-currency="CHF"] [value="CHF"],
    &[data-currency="USD"] [value="USD"],
    &[data-currency="EUR"] [value="EUR"] {
        background: $primary !important;
    }
}

@media (max-width: 700px) {
    .blackFridayOffers-container {
        padding: 0 20px;
    }
}

@media (max-width: 580px) {

    .blackFriday-container {
        padding: 1rem
    }

    .blackFridayOffers-container {
        flex-direction: column;
        padding: 0;
    }

    .blackFridayOffer-container {
        flex: 1;
        width: 100%
    }

    .blackFridayOffer-container + .blackFridayOffer-container {
        margin-top: 3rem;
    }

    .blackFriday-content {
        padding: 0
    }

    .blackFridayOffer-container {
        margin-bottom: 20px;
    }

    .blackFriday-footer {
        padding: 0
    }
}



.blackFridayOffers-container[data-offer-n="1"] {
    justify-content: center;

    .blackFridayOffer-container {
        flex: 0 0 40%
    }


    .blackFridayOffer-container:nth-of-type(1) .be-headerOffer-titles span {
        display: block;
    }
}

@media (max-width: 915px) and (min-width: 800px) {
    .navigation > li { flex: 0 0 90px; }
    .blackFridayModal .modal-dialog {
        border-color: $background;
        width: 100vw;
        margin-left: calc(-100vw/2);
    }

}

@media (max-width: 800px) and (min-width: 600px) {

    .blackFridayOffers-container[data-offer-n="1"] {
        padding: 0;

        .blackFridayOffer-container {
            flex: 0 0 50%
        }
    }

}

.appConfigBody-is-mobile .blackFridayOffers-container[data-offer-n="1"] {

    .blackFridayOffer-container + .blackFridayOffer-container {
        margin-left: 0
    }

}


